<%@include file="include.jsp"%>

<style type="text/css">
div a img.avatar {
	width: 20px;
	height: 20px;
}
</style>

<security:authentication property="principal.id" var="currentUserId" />

<div class="nav-collapse">
	<ul id="headerMenu" class="nav">
		<li id="math"><a href="<c:url value='/math/list'/>">Math</a></li>

		<security:authorize access="hasAnyRole('ADMINISTRATOR')">
			<li id="administration"><a
				href="<c:url value='/admin/user/list'/>">Administration</a></li>
		</security:authorize>
	</ul>

	<ul class="nav pull-right">
		<li id="unreadMessageCount"><c:if
				test="${messageUnreadCount > 0}">
				<a href="<c:url value='/message'></c:url>"> <span
					class="badge badge-info">${messageUnreadCount}</span>
				</a>
			</c:if>
			<div id="newMsg" class="popover bottom"
				style="right: 100px; top: 40px;">
				<div class="arrow"></div>
				<div class="popover-inner" style="width: 150px;">
					<div class="popover-content">
						<p id="newMsgAlertText"></p>
					</div>
				</div>
			</div></li>

		<c:if test="${notificationActive}">
			<li class="dropdown"><a class="dropdown-toggle "
				data-toggle="dropdown" href="#"> <span
					class="badge badge-important">${activeNotificationCount}</span> <b
					class="caret"></b>
			</a>
				<ul class="dropdown-menu dropdown-notif">
					<c:forEach var="notification" items="${notifications}"
						varStatus="iterator">
						<c:if test="${notification.activeNow}">
							<li class="span4">${notification.message} <c:if
									test="${notification.timeLeft>0}">
									<br />
									<strong> ${fn:substringBefore(notification.timeLeft
										div 60,'.')}:<c:if test="${(notification.timeLeft mod 60)<10}">0</c:if>${notification.timeLeft
										mod 60} left
									</strong>
								</c:if>
							</li>
						</c:if>
					</c:forEach>
				</ul></li>
		</c:if>

		<security:authorize access="isAuthenticated()">
			<li class="divider-vertical"></li>
			<li><a href="?lang=en"> <img title="English"
					src="<c:url value='/web-resources/images/gb.png'/>" alt="English" />
			</a></li>
			<li><a href="?lang=ru"> <img title="Russian"
					src="<c:url value='/web-resources/images/ru.png'/>" alt="Russian" />
			</a></li>
			<li id="userMenu" class="dropdown"><a
				href="<c:url value='/profile/'/>" class="dropdown-toggle"
				data-toggle="dropdown"> <img class="avatar" width="20px"
					src="<c:url value="/avatar/${currentUserId}" />" /> <security:authentication
						property="principal.name" /> <b class="caret"></b>
			</a>
				<ul class="dropdown-menu">
					<li><a href="<c:url value="/profile/" />"><i
							class="icon-user"></i> Profile</a></li>
					<li><a href="<c:url value="/profile/settings/" />"><i
							class="icon-cog"></i> Settings</a></li>
					<li><a href="<c:url value='/profile/properties/'/>"> <i
							class="icon-list-alt"></i> Custom Properties
					</a></li>
					<li><a href="<c:url value="/message" />"><i
							class="icon-envelope"></i> Message Box</a></li>
					<li><a href="<c:url value='/stat/user/full'/>"><i
							class="icon-signal"></i> Statistics</a></li>
					<li><a href="<c:url value='/profile/calendar/'/>"><i
							class="icon-calendar"></i> Calendar</a></li>
					<li class="divider"></li>
					<li><a href="<c:url value='/logout'/>"> <i
							class="icon-off"></i> Sign out
					</a></li>
				</ul></li>
		</security:authorize>
	</ul>
</div>

<script type="text/javascript">
	setInterval("refreshHeaderMsgs()", 60000);
</script>